
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Pear Admin Think 安装程序</title>
        <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
		<style>
			.pear-container {
				margin: 10px;
				background-color: whitesmoke;
			}
            .logo {
                width: 60px;
                margin-top: 10px;
                margin-bottom: 10px;
                margin-left: 20px;
            }
            .title {
                font-size: 30px;
                font-weight: 550;
                margin-left: 20px;
                color: #5FB878!important;
                display: inline-block;
                height: 60px;
                line-height: 60px;
                margin-top: 10px;
            }
            .top{
                text-align: center;
                margin-top: 50px;
            }
            .step-item-main {
                padding-left: 38px;
            }
            .step-info{
                padding: 10px 15px;
                border-top: 2px solid #3EC483;
                border-bottom: 2px solid #3EC483;
                display: inline-block;
                font-size: 15px;
                color: #5fb878;
            }
		</style>
	</head>
    <body class="pear-container" background="/static/admin/images/background.svg">
        <div class="top">
            <img class="logo" src="/static/admin/images/logo.png" />
            <div class="title">Pear Admin Think</div>
        </div>
        <div class="layui-card-body" style="padding-top: 40px;">
            <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                <div carousel-item>
                    <div>
                        <form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库地址</label>
                                <div class="layui-input-block">
                                    <input type="text" name="host" value="127.0.0.1" class="layui-input"  lay-verify="required"/>

                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库端口</label>
                                <div class="layui-input-block">
                                    <input type="text" name="port"  value="3306" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库账号</label>
                                <div class="layui-input-block">
                                    <input type="text"  name="user" placeholder="数据库账号" value="" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库密码</label>
                                <div class="layui-input-block">
                                    <input type="text"  name="pass" placeholder="数据库密码" value="" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库名称</label>
                                <div class="layui-input-block">
                                    <input type="text"  name="name" placeholder="数据库名称" value="" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库前缀</label>
                                <div class="layui-input-block">
                                    <input type="text" placeholder="可不填写,示例:tp_" name="pk" value="" class="layui-input"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="reset" class="pear-btn pear-btn-success">
                                        &emsp;重&emsp;置&emsp;
                                    </button>
                                    <button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        <form class="layui-form"  action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">管理员账号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="username" value="admin" class="layui-input"  lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">管理员昵称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="nickname" value="超级管理员" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">管理员密码</label>
                                <div class="layui-input-block">
                                    <input type="text"  name="password" value="123456" class="layui-input"  lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="pear-btn pear-btn-success pre">&emsp;上一步&emsp;</button>
                                    <button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep2">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        <div style="text-align: center;margin-top: 30px;">
                            <div class="step-info">
                                <p>请确认安装信息</p>
                                <div id="setpInfo"></div>
                            </div>
                        </div>
                        <div style="text-align: center;margin-top: 50px;">
                            <button class="pear-btn pear-btn-success pre">&emsp;上一步&emsp;</button>
                            <button class="pear-btn pear-btn-success go">&emsp;提交&emsp;</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="/static/component/layui/layui.js"></script>
        <script src="/static/component/pear/pear.js"></script>
		<script>
			layui.use(['form', 'layer','step'], function() {
				var $ = layui.$,
					form = layui.form,
                    step = layui.step;
                    setpSql = '';
                    setpAdmin = '';
                    step.render({
                        elem: '#stepForm',
                        filter: 'stepForm',
                        width: '100%', //设置容器宽度
                        stepWidth: '750px',
                        height: '500px',
                        stepItems: [{
                            title: '数据库'
                        }, {
                            title: '管理员'
                        }, {
                            title: '提交'
                        }]
                    });

                    form.on('submit(formStep)', function(data) {
                        sql = data.field;
                        data.field.step = '1';
                        $.ajax({
                            type: "POST",
                            data: Object.assign(sql),
                            async : false,
                            success: function (res) {
                                //验证通过
                                if (res.code==200){
                                    step.next('#stepForm');
                                    setpSql = res.msg;
                                } else {
                                    layer.msg(res.msg,{icon:2,time:1500})
                                }
                            }
                        });
                        return false;
                    });
				form.on('submit(formStep2)', function(data) {
                    setpAdmin = data.field;
                    data.field.step = '2';
                    data =  Object.assign(setpSql, setpAdmin);
                    $.ajax({
                        type: "POST",
                        data: data,
                        async : false,
                        success: function (res) {
                            //验证通过
                            if (res.code==200){
                                step.next('#stepForm');
                                setpAdmin = res.msg;
                                var htmlText =  '<p>数据库地址:'+setpSql['host']+'</P>';
                                    htmlText += '<p>数据库端口:'+setpSql['port']+'</P>';
                                    htmlText += '<p>数据库账号:'+setpSql['user']+'</P>';
                                    htmlText += '<p>数据库密码:'+setpSql['pass']+'</P>';
                                    htmlText += '<p>数据库名称:'+setpSql['name']+'</P>';
                                    htmlText += '<p>数据库前缀:'+setpSql['pk']+'</P>';
                                    htmlText += '<p>管理员账号:'+setpAdmin['username']+'</P>';
                                    htmlText += '<p>管理员昵称:'+setpAdmin['nickname']+'</P>';
                                    htmlText += '<p>管理员密码:'+setpAdmin['password']+'</P>';
                                    document.getElementById("setpInfo").innerHTML = htmlText;
                            } else {
                                layer.msg(res.msg,{icon:2,time:1500})
                            }
                        }
                    });
					return false;
				});

				$('.pre').click(function() {
					step.pre('#stepForm');
					return false;
				});

				$('.next').click(function() {
					step.next('#stepForm');
				    return false;
				});

                $('.go').click(function() {
                    layer.load();
                    data =  Object.assign(setpSql, setpAdmin);
                    data.step = 3;
                    $.ajax({
                        type: "POST",
                        data: data,
                        success: function (res) {
                            layer.closeAll('loading');
                            //验证通过
                            if (res.code==200){
                                layer.msg(res.msg,{icon:1,time:1500});
                                location.reload();
                            } else {
                                layer.msg(res.msg,{icon:2,time:1500})
                            }
                        }
                    });
                    return false;
				});
			})
		</script>
	</body>
</html>
